<template>
  <div class="sales-report">
    <div class="header">电商趋势图</div>
    <div class="content">
      <div class="content-title-wrapper">月销售增长率</div>
      <div class="content-index-wrapper">
        <span class="arrow-up"></span>
        <span class="percentage">34<span>%</span></span>
        <span class="text">+14,400</span>
      </div>
      <div id="content-chart"></div>
      <div class="content-circle-wrapper"></div>
      <div class="content-bottom-wrapper">销售趋势</div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
};
</script>

<style lang="scss">
//cnpm i -D sass-loader node-sass
.sales-report {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(4, 9, 20, 0.03), 0;
}
.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;

  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  color: rgba(13, 27, 62, 0.7);
  padding-left: 20px;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 28px;
  box-sizing: border-box;
  .content-title-wrapper {
    padding-top: 28px;
    color: rgb(108, 117, 125);
    font-size: 13px;
  }
  .content-index-wrapper {
    display: flex;
    align-items: center;
    margin-top: 15px;
    .arrow-up {
      color: rgb(58, 196, 125);
      svg {
        width: 25px;
      }
    }
    .percentage{
      font-size: 35px;
      font-weight: 700;
      color: #333;
      margin-left: 15px;
      span{
font-size: 28px;
font-weight: 400;
color: #999;
margin-left: 2px;
      }
    }
    .text{
      color:  rgb(58, 196, 125);
margin-left: 15px;
    }
  }
  #content-chart {
    flex: 1;
  }
  .content-circle-wrapper {
  }
  .content-bottom-wrapper {
  }
}
.footer {
  width: 100%;
  height: 120px;
  background: red;
  border-top: 1px solid #eee;
  box-sizing: border-box;
}
</style>